import { Component } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuModule } from 'ng-zorro-antd/menu';

@Component({
  selector: 'app-menu-horizontal',
  standalone: true,
  imports: [NzMenuModule, NzIconModule],
  template: `
    <div nz-menu nzMode="horizontal">
      <div nz-menu-item>
        <span nz-icon nzType="mail"></span>
        Navigation 1
      </div>
      <div nz-menu-item [nzDisabled]="true">
        <span nz-icon nzType="appstore"></span> Navigation 2
      </div>
      <div nz-submenu nzTitle="Navigation 3 - Submenu" nzIcon="setting">
        <div nz-menu-group nzTitle="Item 1">
          <div nz-menu-item>Option 1</div>
          <div nz-menu-item [nzDisabled]="true">Option 2</div>
        </div>
        <div nz-menu-group nzTitle="Item 2">
          <div nz-menu-item>Option 3</div>
          <div nz-menu-item>Option 4</div>
          <div nz-submenu nzTitle="Sub menu">
            <div nz-menu-item>Option 5</div>
            <div nz-menu-item>Option 6</div>
          </div>
          <div nz-submenu nzTitle="Sub menu 2" [nzDisabled]="true">
            <div nz-menu-item>Option 7</div>
            <div nz-menu-item>Option 8</div>
          </div>
        </div>
      </div>
      <div nz-menu-item>
        <a href="/" target="_blank" rel="noopener noreferrer">
          Navigation 4 - link
        </a>
      </div>
    </div>
  `,
})
export class MenuHorizontalDivComponent {}
